<template>
    <transition
            :enter-active-class="inClass"
            :leave-active-class="outClass"
    >
        <div v-if="$parent.currentPage === page" class="s_fullpageItem">
            <slot></slot>
        </div>
    </transition>
</template>
<script>
    export default {
        name: "s-fullpageItem",
        props: {
            // 页面标识，必传且不能与其他页重复！
            page: {
                type: String,
                required: true
            },
            nextInClass: {
                type: String,
                default: 'slidInFromBottom'
            },
            nextOutClass: {
                type: String,
                default: 'slidOutFromTop'
            },
            previousInClass: {
                type: String,
                default: 'slidInFromTop'
            },
            previousOutClass: {
                type: String,
                default: 'slidOutFromBottom'
            },
        },
        watch: {
            '$parent.currentIndex'(newIndex, oldindex) {
                if (newIndex >= oldindex) {
                    // 向下翻页时，使用向下翻页的动画，默认为从下方滑入，从上方滑出
                    this.inClass = this.nextInClass
                    this.outClass = this.nextOutClass
                } else {
                    // 向上翻页时，使用向上翻页的动画，默认为从上方滑入，从下方滑出
                    this.inClass = this.previousInClass
                    this.outClass = this.previousOutClass
                }
            }
        },
        data() {
            return {
                inClass: '',
                outClass: '',
            }
        },
    }
</script>
<style scoped>
    .s_fullpageItem {
        position: absolute;
        height: 100vh;
        width: 100vw;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: scroll;
        
    }
 
    /*滑出——从上方*/
    .slidOutFromTop {
        animation: slidOutFromTop 1s
    }
 
    @keyframes slidOutFromTop {
        from {
            top: 0;
        }
        to {
            top: -100%;
        }
    }
 
    /*滑出——从下方*/
    .slidOutFromBottom {
        animation: slidOutFromBottom 1s
    }
 
    @keyframes slidOutFromBottom {
        from {
            top: 0;
        }
        to {
            top: 100%;
        }
    }
 
 
    /*滑入——从上方*/
    .slidInFromTop {
        animation: slidInFromTop 1s
    }
 
    @keyframes slidInFromTop {
        from {
            top: -100%;
        }
        to {
            top: 0;
        }
    }
 
    /*滑入——从下方*/
    .slidInFromBottom {
        animation: slidInFromBottom 1s
 
    }
 
    @keyframes slidInFromBottom {
        from {
            top: 100%;
        }
        to {
            top: 0;
        }
    }
</style>